<template>
    <div style="width: 600px; margin:auto;">
        <h1>实例：商品导航和商品列表之间的通信</h1>
        <div style="float:left;width:20%;">
            <GoodsNav @handle="handle"></GoodsNav>
        </div>
        <div style="float:left;width:80%;">
            <GoodsList :list="list"/>
        </div>

    </div>
</template>

<script>
import GoodsList from '@/components/Sample/GoodsList.vue';
import GoodsNav from '@/components/Sample/GoodsNav.vue';


export default{
    components:{
        GoodsNav,
        GoodsList
    },
    data(){
        //父组件向子组件传递图片路径是，传的是绝对路径，但如果我们真的直接写绝对路径，那么在传递时，
        //会加上ip和端口号，在页面就无法进行访问，可以通过加require解决这个问题。
        return{
            goods:[{id:'001',name:'暹罗猫',cid:'1',src:require('../assets/xl.png')},
            {id:'002',name:'美国短毛猫',cid:'1',src:require('../assets/md.png')},
            {id:'003',name:'布偶猫',cid:'1',src:require('../assets/bo.png')},
            {id:'004',name:'德文猫',cid:'1',src:require('../assets/dw.png')},
            {id:'005',name:'金毛',cid:'2',src:require('../assets/jm.png')},
            {id:'006',name:'泰迪',cid:'2',src:require('../assets/td.png')},
            {id:'007',name:'山羊',cid:'3',src:require('../assets/sy.png')}
            
            ],
            list:[]
        }
        
    },//使用mounted生命周期钩子函数，使得打开页面时，就能够吧数据传递
mounted(){
    this.list= this.goods.slice()
},
methods:{
    handle(val){
        this.list=this.goods.filter(v=>v.cid==val)
    }
}
}
</script>